<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Development Technologies</title>
</head>
<body>
<h1>HTML Examples</h1>
<ul>
    <li><a href="html/baseexamples.html">HTML Basic Examples</a></li>
    <li><a href="html/textformatting.html">HTML Text Formatting & Link & Image Examples</a></li>
    <li><a href="html/table.html">HTML Tables Examples</a></li>
    <li><a href="html/list.html">HTML Lists Examples</a></li>
    <li><a href="html/display.html">HTML Block and Inline Elements Examples</a></li>
    <li><a href="html/input.html">HTML Input Examples</a></li>
    <li><a href="html/form.html">HTML Textarea & Label & Fieldset & Select & Datalist Examples</a></li>
    <li><a href="html/formattribute.html">HTML Form Attributes Examples</a></li>
</ul>
<h1>CSS Examples</h1>
<ul>
    <li><a href="css/elementselector.html">CSS Element & ID Selectors Examples</a></li>
    <li><a href="css/classselector.html">CSS Class Selectors Examples</a></li>
    <li><a href="css/cssfile.html">CSS File Examples</a></li>
    <li><a href="css/cascade.html">CSS Cascading Examples</a></li>
    <li><a href="css/unit.html">CSS Unit Examples</a></li>
    <li><a href="css/boxmodel.html">CSS Box Model Examples</a></li>
    <li><a href="css/image.html">CSS Images & Opacity Examples</a></li>
    <li><a href="css/combinator.html">CSS Combinators Examples</a></li>
    <li><a href="css/pseudo.html">CSS Pseudo-classes Examples</a></li>
    <li><a href="css/form.html">CSS Form Examples</a></li>
    <li><a href="css/linklist.html">CSS Lists Examples</a></li>
    <li><a href="css/table.html">CSS Tables Examples</a></li>
    <li><a href="css/display.html">CSS Display & Inline-Block Examples</a></li>
    <li><a href="css/float.html">CSS Float Examples</a></li>
    <li><a href="css/position.html">CSS Position Examples</a></li>
</ul>
<h1>CSS Advanced Examples</h1>
<ul>
    <li><a href="css-advanced/box-sizing.html">CSS Box-sizing Examples</a></li>
    <li><a href="css-advanced/nav.html">CSS Navigation Bar Examples</a></li>
    <li><a href="css-advanced/transition.html">CSS Transitions Examples</a></li>
    <li><a href="css-advanced/transform.html">CSS Transforms Examples</a></li>
    <li><a href="css-advanced/shadow.html">CSS Shadow Effects Examples</a></li>
    <li><a href="css-advanced/nav-advanced.html">Awesome SideBar With Shadow & Transition & Transform</a></li>
    <li><a href="css-advanced/dropdown.html">CSS Dropdowns Examples</a></li>
    <li><a href="css-advanced/viewpoint-unit.html">CSS Viewport Units</a></li>
    <li><a href="css-advanced/flex.html">CSS Flexbox Layout Examples</a></li>
    <li><a href="css-advanced/nav-dropdown.html">CSS Dropdown Navigation Bar Examples</a></li>
    <li><a href="css-advanced/grid.html">CSS Grid Layout Examples</a></li>
</ul>
<h1>Responsive Web Design</h1>
<ul>
    <li><a href="responsive/resp.html">Basic Responsive Layout With Grid</a></li>
    <li><a href="responsive/resp-grid.html">Responsive Layout With Grid</a></li>
    <li><a href="responsive/resp-flex.html">Responsive Layout With Flex</a></li>
</ul>
<h1>JavaScript & jQuery Examples</h1>
<ul>
    <li><a href="javascript/javascript.html">JavaScript Basic Examples</a></li>
    <li><a href="javascript/javascript-adv.html">JavaScript Basic Examples - 2</a></li>
    <li><a href="javascript/jquery.html">jQuery Examples</a></li>
</ul>
<h1>Servlet Examples</h1>
<ul>
    <li><a href="parameter?boardid=10&topicid=101">向parameter?boardid=10&topicid=101，发送请求</a></li>
    <li><a href="servlet/login.html">post请求，登录页面</a></li>
    <li><a href="servlet/register.html">注册，多种输入类型的post请求</a></li>
    <li><a href="example01/responsehtml">基于PrintWriter在文本输出流中写入数据</a></li>
    <li><a href="example02/redirect">将被重定向到/servlet/login.html</a></li>
    <li><a href="example02/dispatcher">请求被转发至/servlet/login.html，地址栏不变</a></li>
    <li><a href="example02/dispatcher2">请求将被转发到，/WEB-INF/example02/index.html页面</a></li>
    <li><a href="example02/login">资源均为内部转发，post重定向到指定地址</a></li>
    <li><a href="example03/setscope">在不同作用域设置参数，第一次请求范围，控制台查询</a></li>
    <li><a href="example03/getscope">第二次请求，在控制台查看不同作用域数据</a></li>
    <li><a href="example04/welcome">未登录，直接访问welcome，重定向到登录页面</a></li>
</ul>
<h1>Servlet Filter Examples</h1>
<ul>
    <li><a href="filter/welcome">拦截器，未登录，直接访问welcome，重定向到登录页面</a></li>
</ul>
<h1>JSP Examples</h1>
<ul>
    <li><a href="jsp/index.jsp">jsp基本语法</a></li>
    <li><a href="jsp/include.jsp">jsp include指令, 引入静态资源</a></li>
</ul>
<h1>EL & JSTL Examples</h1>
<ul>
    <li><a href="example06/el">EL基本语法</a></li>
    <li><a href="example07/jstl">JSTL基本标签</a></li>
    <li><a href="jstl/listcourses">课程列表，动态生成超链接参数</a></li>
    <li><a href="jstl/updateteacher">动态修改HTML元素属性，实现页面初始化的渲染效果</a></li>
</ul>
<h3>Request Path</h3>
<ul>
    <li><a href="base">基于JSTL动态获取项目部署路径</a></li>
</ul>
<h3>AJAX Examples</h3>
<ul>
    <li><a href="ajax">AJAX</a></li>
</ul>
<h3>JDBC Examples</h3>
<ul>
    <li><a href="jdbc/index">JDBC insert update delete query基本实例</a></li>
</ul>

</body>
</html>

